<template>
	<view>
		<zx-nav title="修改昵称" bg="#fff"></zx-nav>
		<view class="card">
			<u-form labelPosition="left" ref="form1">
				<u-form-item label="昵称" ref="item1"><u-input v-model="wx_name" border="none" clearable @clear="wx_name = ''"></u-input></u-form-item>
			</u-form>
		</view>
		<view class=" u-m-40"><u-button @click="uploadInfo" shape="circle" :loading="btnLoading" type="success" text="确定"></u-button></view>
	</view>
</template>

<script>
import { mapState, mapMutations, mapActions } from 'vuex';
export default {
	data() {
		return {
			info: {},
			wx_name: '',
			btnLoading: false
		};
	},
	onLoad(option) {
		this.wx_name = option.username;
	},
	computed: {
		...mapState(['userInfo'])
	},
	methods: {
		...mapActions(['getUserInfo']),
		uploadInfo() {
			this.btnLoading = true;
			let that = this;
			let option = {
				wx_name: this.wx_name,
				openid: that.userInfo.openid
			};
			this.$postAction(this.$api.updateUserInfo, option)
				.then(da => {
					if (da.code == 0) {
						uni.showToast({
							title: '更新成功',
							icon: 'none'
						});
						that.getUserInfo();
						uni.$u.BackPage();
					}
				})
				.finally(() => {
					this.btnLoading = false;
				});
		}
	}
};
</script>

<style scoped>
.card {
	margin: 36upx 28upx;
	padding: 0 28upx;
}
.submitBtn {
	margin: 30upx 60upx;
}
</style>
